
import Vue from 'vue';

//引入静态组件
import pageDialog from './index.vue';
//  返回一个 扩展实例构造器
//接受的是一个组件对象，再执行extend时将继承基类构造器上的一些属性、原型方法、静态方法等，最后返回Sub这么一个构造好的子组件构造函数。拥有和vue基类一样的能力，并在实例化时会执行继承来的_init方法完成子组件的初始化。
const PageDialogConstructor = Vue.extend(pageDialog);


// 实例化组件，能得到$el属性，也就是组件的真实dom，这时候可以操作这个dom去挂载
const initInstance = (title, confirmButtonText, cancelButtonText) => {
  //  我的理解：实例化构造器，相当于在页面中引入的一个vue组件
  // 并且将组件挂载到div中
  return new PageDialogConstructor({
    // 组件要被挂载的位置
    el: document.createElement('div'),
    data() {
      return {
        title,
        confirmButtonText,
        cancelButtonText
      };
    },
  });
};

//  添加到网页
const showDialog = (title, options = {}) => {
  let { confirmButtonText, cancelButtonText } = options
  let instance = initInstance(title, confirmButtonText, cancelButtonText);

  return new Promise((resolve, reject) => {
    instance.callback = action => {
      if (action === 'confirm') {
        console.log('resolve')
        resolve()
      } else {
        console.log('reject')
        reject()
      }
    }
    document.body.appendChild(instance.$el);
    // console.log(instance)
    Vue.nextTick(() => {
      instance.visible = true;
    });
  })
};

// 注册为全局组件的函数
function registryConfirm() {
  Vue.prototype.$myDialog = showDialog;
}
export default registryConfirm;